<style>
    #stockTransferConfirm {
        width: 100%;
        min-width: 890px;
        position: relative;
    }

    #stockTransferConfirm .demo-table-expand {
        font-size: 0;
    }

    #stockTransferConfirm .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    #stockTransferConfirm .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 80%;
    }

    #stockTransferConfirm .el-table__expand-column .el-table__expand-icon {
        height: 39px;
    }

    #stockTransferConfirm .table {
        transition: 1s all;
    }

    #stockTransferConfirm .el-carousel__container {
        height: 440px;
    }

    .el-tooltip__popper {
        max-width: 400px;
    }

    .el-step__main {
        max-width: calc(100% - 60px);
    }

    #stockTransferConfirm .stockTransferConfirmTable {
        width: 95% !important;
        margin: 20px auto;
    }

    #stockTransferConfirm .datePicker {
        width: 140px !important;
        height: 24px !important;
        margin-top: 29px;
        margin-right: 18px;
        float: left;
    }

    #stockTransferConfirm .datePicker .el-input__inner {
        border-radius: 2px !important;
        height: 24px !important;
    }

    #stockTransferConfirm .add {
        background: url("/static/images/add.png") no-repeat center;
    }

    #stockTransferConfirm .del {
        background: url("/static/images/del.png") no-repeat center;
    }

    #stockTransferConfirm .search {
        background: url("/static/images/search.png") no-repeat center;
    }

    #stockTransferConfirm .sel {
        background: url("/static/images/sel.png") no-repeat center;
    }

    #stockTransferConfirm .icon {
        float: left;
    }

    #stockTransferConfirm .btn span {
        float: left;
        margin-top: 4px;
        margin-left: 2px;
    }

    #stockTransferConfirm .btn {
        height: 24px;
        line-height: 1;
        border: none;
        background: #f8fafb;
        outline: none;
        cursor: pointer;
        padding: 0;
        margin: 0;
        float: left;
        font-size: 14px;
        color: #1f2d3d;
        margin-top: 29px;
        margin-right: 16px;
    }

    #stockTransferConfirm .btn-print {
        margin-right: 0;
    }

    #stockTransferConfirm .btn:hover {
        color: #5468ee;
    }

    #stockTransferConfirm .inner {
        margin: 0 20px;
    }

    #stockTransferConfirm .btn-nav {
        height: 60px;
        overflow: hidden;
    }

    #stockTransferConfirm .btn-nav .el-input .el-input__inner {
        height: 24px;
    }

    #stockTransferConfirm .btn-nav .el-input {
        float: left;
        margin-top: 29px;
        margin-right: 18px;
        width: 140px;
        height: 24px;
    }
</style>
<style>
    .steps {
        position: absolute;
        bottom: 10px;
        left: 30px;
        margin: auto;
    }

    .el-dialog__headerbtn {
        position: absolute;
        right: 25px;
        top: 15px;
    }

    .el-step__main {
        margin-left: -8px !important;
    }
</style>
<style>
    .select {

    }

    .select .input {
        width: 70%;
    }
</style>
<div id="stockTransferConfirm">
    <!--页面调整-->
    <el-row v-loading="showLoading"
            element-loading-text="拼命加载中">
        <el-col :span="24">
            <div class="inner btn-nav">
                <el-input
                        v-model="zyMentionUserName"
                        icon="search"
                        placeholder="提起人"></el-input>
                <el-input
                        v-model="zyCreateUserName"
                        icon="search"
                        placeholder="创建人"></el-input>
                <el-date-picker
                        v-model="date"
                        type="daterange"
                        align="right"
                        placeholder="创建日期"
                        class="datePicker"
                        :picker-options="pickerOptions">
                </el-date-picker>
                <el-select
                        v-model="zyStatus"
                        placeholder="请选择">
                    <el-option label="全部" :value.number="-1"></el-option>
                    <el-option label="未确认" :value.number="0"></el-option>
                    <el-option label="已确认" :value.number="1"></el-option>
                </el-select>
                <el-select
                        @visible-change="selectReturn"
                        v-model="zyArehouseId"
                        placeholder="请选择所属仓库">
                    <el-option :label="obj.baName" :value="obj.baArehouseId"
                               v-for="obj of baseArehouses"></el-option>
                </el-select>
            </div>
            <el-table
                    :data="stockTransferConfirm"
                    :default-sort="{prop: 'sjsj', order: 'descending'}"
                    :max-height="config_table_height()"
                    ref="table"
                    @expand="expandChange"
                    class="stockTransferConfirmTable"
                    @selection-change='multiSelectionChange'
                    style="width: 100%">
                <el-table-column
                        type="expand">
                    <template scope="props">
                        <el-carousel
                                arrow="hover"
                                height="280px"
                                indicator-position="none"
                                :autoplay="false">
                            <el-carousel-item>
                                <el-row>
                                    <h3>库存转移详细</h3>
                                </el-row>
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-row>
                                        <el-col :span="10">
                                            <el-form-item label="创建时间">
                                        <span>
                                            <el-icon name="time"></el-icon>
                                            {{ auto_time_new(props.row.zyCreateTime,6) }}
                                        </span>
                                            </el-form-item>
                                            <el-form-item label="提起人">
                                                <span>{{ props.row.zyMentionUserName }}</span>
                                            </el-form-item>
                                            <el-form-item label="创建人">
                                                <span>{{props.row.zyCreateUserName}}</span>
                                            </el-form-item>
                                            <el-form-item label="确认人">
                                                <span>{{props.row.zyConfirmUserName}}</span>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span="10" :offset="2">
                                            <el-form-item label="转移原因">
                                                <span>{{ props.row.zyReason	 }}</span>
                                            </el-form-item>
                                            <el-form-item
                                                    v-if="props.row.zyStatus==0"
                                                    label="确认时间">
                                        <span>
                                            <el-icon name="time"></el-icon>
                                            {{ auto_time_new(props.row.zyConfirmTime,6) }}
                                        </span>
                                            </el-form-item>
                                            <el-form-item label="转移状态">
                                                <el-tag-s :val="auto_el_tag('zyStatus',props.row.zyStatus)"></el-tag-s>
                                            </el-form-item>
                                            <el-form-item
                                                    v-if="props.row.zyStatus==0"
                                                    label="可用操作">
                                                <el-button
                                                        size="small"
                                                        type="warning"
                                                        @click="inlineConfirm(props.$index, props.row)">确认
                                                </el-button>
                                                <el-button
                                                        size="small"
                                                        icon="delete"
                                                        type="danger"
                                                        @click="deleteOlder(props.$index, props.row)">删除
                                                </el-button>

                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form>
                            </el-carousel-item>
                            <el-carousel-item>
                                <el-table
                                        :data="props.row.zyDocsList">
                                    <el-table-column
                                            type="index"
                                            width="55">
                                    </el-table-column>
                                    <el-table-column
                                            label="货品编号"
                                            width="150"
                                            show-overflow-tooltip
                                            align="center"
                                            prop="mfunRepertory.baseGoods.bgGoodsNo">
                                    </el-table-column>
                                    <el-table-column
                                            label="货品名称"
                                            show-overflow-tooltip
                                            align="center"
                                            prop="mfunRepertory.baseGoods.bgGoodsName">
                                    </el-table-column>
                                    <el-table-column
                                            label="转移前储位"
                                            width="120"
                                            align="center"
                                            prop="beforeLocationName">
                                    </el-table-column>
                                    <el-table-column
                                            label="可转移数量"
                                            width="150"
                                            show-overflow-tooltip
                                            align="center"
                                            prop="zysZyBeforeKyCount">
                                    </el-table-column>
                                    <el-table-column
                                            label="转移后储位"
                                            width="120"
                                            show-overflow-tooltip
                                            align="center"
                                            prop="afterLocationName">
                                    </el-table-column>
                                    <el-table-column
                                            label="转移数量"
                                            width="120"
                                            show-overflow-tooltip
                                            align="center"
                                            prop="zysZyCount">
                                    </el-table-column>
                                    <!--<el-table-column-->
                                    <!--label="操作"-->
                                    <!--width="80">-->
                                    <!--<template scope="scope">-->
                                    <!--<el-button-->
                                    <!--@click="form_click_delete(scope.$index,scope.row)"-->
                                    <!--size="small"-->
                                    <!--type="danger"-->
                                    <!--icon="delete">-->
                                    <!--</el-button>-->
                                    <!--</template>-->
                                    <!--</el-table-column>-->
                                </el-table>
                            </el-carousel-item>
                        </el-carousel>
                    </template>
                </el-table-column>
                <el-table-column
                        label="创建时间"
                        show-overflow-tooltip
                        align="center">
                    <template scope="scope">
                        <span>
                            {{auto_time_new(scope.row.zyCreateTime)}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="提起人"
                        show-overflow-tooltip
                        align="center"
                        prop="zyMentionUserName">
                </el-table-column>
                <el-table-column
                        label="创建人"
                        show-overflow-tooltip
                        align="center"
                        prop="zyCreateUserName">
                </el-table-column>
                <el-table-column
                        label="确认人"
                        show-overflow-tooltip
                        align="center"
                        prop="zyConfirmUserName">
                </el-table-column>
                <el-table-column
                        label="转移原因"
                        show-overflow-tooltip
                        align="center"
                        prop="zyReason">
                </el-table-column>
                <el-table-column
                        label="确认时间"
                        show-overflow-tooltip
                        align="center">
                    <template scope="scope">
                        <span>
                            {{auto_time_new(scope.row.zyConfirmTime)}}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="转移状态"
                        align="center"
                        width="100">
                    <template scope="scope">
                        <el-tag-s :val="auto_el_tag('zyStatus',scope.row.zyStatus)"></el-tag-s>
                    </template>
                </el-table-column>
                <el-table-column
                        v-if="multiSelect"
                        type="selection"
                        width="60">
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="1"
                        :page-sizes="[5, 10, 15, 20, 100, 500, 1000, 5000, 10000]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="currentTotal">
                </el-pagination>
            </div>
        </el-col>
    </el-row>
</div>
<script>
    var stockTransferConfirm = new Vue({
        el: '#stockTransferConfirm',
        prop: {},
        data: function () {
            return {
                watchView: false,
                baseArehouses: window.dbmessage.baseArehouses,
                stockTransferConfirm: [],
                multipleSelection: [],
                multiSelect: false,
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick: function (picker) {
                            var end = new Date();
                            var start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick: function (picker) {
                            var end = new Date();
                            var start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick: function (picker) {
                            var end = new Date();
                            var start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                showLoading: false,
                currentPage: 1,
                pageSize: 10,
                currentTotal: 0,
                date: [null, null],                 //主页面 选择日期 搜索
                zyMentionUserName: '',             //主页面 提起人 搜索
                zyCreateUserName: '',                 //主页面 创建人 搜索
                zyStatus: '',                        //主页面 转移状态
                zyArehouseId:window.dbmessage.baseArehouses[0].baArehouseId,
                formLabelWidth: '120px',            //表单 配置
                form: form(),                           //表单 弹出层 信息集合
                dialogFormActive: 0,                //新建 弹出层 steps 当前进度
                dialogFormVisible: false,           //新建 弹出层 是否可见
                submitLoading: false,               //新建 弹出层 提交等待
                select: form(),                         //搜索 弹出层 信息集合,
                printf: [],                         //搜索 弹出层 信息集合,
                dialogSelectVisible: false,
                dialogPrintfVisible: false,
                selectLoading: false,
                printfLoading: false,
                printDatas: [],          // 打印数据
            }
        },
        computed: {
            option: function () {
                return {
                    "draw": 1,
                    "pageNum": this.currentPage,
                    "pageSize": this.pageSize,
                    "zyMentionUserName": this.zyMentionUserName.trim(),
                    "zyCreateUserName": this.zyCreateUserName.trim(),
                    "zyStatus": this.zyStatus,
                    "startCreateTimeParam": tsf_date(this.date[0]),
                    "endCreateTimeParam": tsf_date(this.date[1]),
                    "zyArehouseId":this.zyArehouseId
                }
            },
            search: function () {
                return {
                    "draw": 1,
                    "pageNum": this.currentPage,
                    "pageSize": this.pageSize,
                    "rkrwN": this.form.rkrwN,
                    "rkrwCph": this.form.rkrwCph,
                    "dds": this.form.dds,
                    "pxs": this.form.pxs,
                    "rkrwSjxm": this.form.rkrwSjxm,
                    "rkrwDhrq": this.form.rkrwDhrq,
                    "rkrwDbd": this.form.rkrwDbd,
                    "rkrwCys": this.form.rkrwCys,
                    "rkrwDh": this.form.rkrwDh,
                    "rkrwStatus": this.form.rkrwStatus
                }
            }
        },
        methods: {
            inlineConfirm: function (index, row) {
                var obj = this;
                obj.$confirm('此操作将此库存转移单确认, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    p[1].post({
                        "id": row.zyId,
                        "useId": app.rmsUser.ruUserId,
                        "userName": app.rmsUser.ruUserName
                    }, function (json) {
                        this.callbackAfter(json, function () {
                            p[0].post(obj.option);
                        })
                    })
                }).catch(function () {
                    obj.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },                              //TODO 行内按钮-确认
            deleteOlder: function (index, row) {
                var _this = this;
                _this.$confirm('此操作将永久删除库存转移详细单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    p[5].post({
                        "ids": [
                            row.zyId
                        ],
                        "useId": app.rmsUser.ruUserId,
                        "userName": app.rmsUser.ruUserName
                    }, function (json) {
                        this.callbackAfter(json, function () {
                            remove(row, _this.stockTransferConfirm);
                        })
                    })
                }).catch(function () {
                    _this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },                                 //TODO 行内按钮-删除
            multiSelectClick: function () {
                this.multiSelect = !this.multiSelect;
            },                                      //多选 状态维护
            multiSelectionChange: function (val) {
                /*<debug>*/
                console.log(this.multipleSelection);
                /*</debug>*/
                this.multipleSelection = val;
            },                               //多选 选中控制
            moreOperationDelete: function () {
                /*<debug>*/
                console.log('选中的删除');
                /*</debug>*/
                for (i = 0; i < this.multipleSelectionCombination.length; i++) {
                    remove(this.multipleSelectionCombination[i], this.warehousingReservationCombination);
                }
            },                                   //多选 删除
            handleSizeChange: function (val) {
                /*<debug>*/
                console.log('每页' + val + '条');
                /*</debug>*/
                this.pageSize = val;
                p[0].post(this.option);
            },                                   //分页 Size
            handleCurrentChange: function (val) {
                /*<debug>*/
                console.log('当前第' + val + '页');
                /*</debug>*/
                this.currentPage = val;
                p[0].post(this.option);
            },                                //分页 当前页
            prev: function () {
                this.dialogFormActive--;
                this.$refs.carousel.prev();
            },                                                  //新建 弹出层banner控制 前一个
            next: function () {
                this.dialogFormActive++;
                this.$refs.carousel.next();
            },                                                  //新建 弹出层banner控制 后一个
            submit: function () {
                var _this = this;
                this.dialogFormActive++;
                this.submitLoading = true;
                //TODO 此处应是ajax请求
                setTimeout(function () {
                    _this.submitLoading = false;
                    _this.$notify({
                        title: '成功',
                        message: '保存成功！',
                        type: 'success'
                    });
                    _this.dialogFormVisible = false;
                    _this.form = {
                        rkRkdjNo: '',
                        rkType: '',
                        rkRemarks: '',
                        rkDocsList: [],
                        bgGoodsNo: '',
                        selectGood: {
                            value: '',
                            bgGoodsName: '',
                            count: 0,
                            bgGoodsId: ''
                        },
                        saveARkDocsList: true,
                        deleteARkDocsList: true
                    };
                    _this.dialogFormActive = 0;
                    _this.$refs.carousel.setActiveItem(0);
                    p[0].pos();
                }, 1500);
            },                                                //新建 表单提交
            selectSubmit: function () {
                this.dialogSelectVisible = !this.dialogSelectVisible;
                p[0].pos({});
            },                                          //详细查询 提交
            auto_zyStatus: function (value) {
                var temp = {}
                if (!isNaN(value)) {
                    temp = {
                        0: '未确认',
                        1: '确认',
                        2: '作废',
                    }
                } else {
                    temp = {
                        '未确认': 0,
                        '确认': 1,
                        '作废': 2
                    }
                }
                return temp[value];
            },                                       //转移状态


            expandChange:function (row, expanded) {
                if (expanded && (typeof (row.mfunckDoc) === 'undefined' || row.mfunckDoc === null || row.mfunckDoc.length === 0)) {
                    p[6].post({
                        id: row.zyId
                    }, function (json) {
                        /*<debug>*/
                        console.log(json);
                        /*</debug>*/
                        row.zyDocsList = json.zyDocsList;
                    });
                }
            }
        },
        watch: {
            zyMentionUserName: function () {
                /*<debug>*/
                console.log(this.option);
                /*</debug>*/
                p[0].post(this.option);
            },
            zyCreateUserName: function () {
                /*<debug>*/
                console.log(this.option);
                /*</debug>*/
                p[0].post(this.option);
            },
            zyStatus: function () {
                /*<debug>*/
                console.log(this.option);
                /*</debug>*/
                p[0].post(this.option);
            },
            zyArehouseId: function () {
                /*<debug>*/
                console.log(this.option);
                /*</debug>*/
                p[0].post(this.option);
            },
        }
    });
    // 高级 监视器的 使用方法
    stockTransferConfirm.$watch('date', function () {
        /*<debug>*/
        console.log(this.option);
        /*</debug>*/
        p[0].post(this.option);
    }, {deep: true});
    function form() {
        return {
            zyCreateTime: '',
            zyMentionUserName: '',
            zyCreateUserName: '',
            zyConfirmUserName: '',
            zyReason: '',
            zyConfirmTime: '',
            zyStatus: '',
            zyCreateTime: [null, null],//模糊查询--创建日期
            zyStatus: '',//模糊查询--转移状态
            zyMentionUserName: '',//模糊查询--提起人
            zyConfirmUserName: ''//模糊查询--确认人
        }
    }
    var obj = stockTransferConfirm;
    var p = [];
    // 0 库存转移确认 分页查询
    p[0] = autoPost({
        urlHock: "../../hock/stockTransferConfirm/page.json",
        urlProd: "/route/stockTransferConfirm/0",
        success: function (json) {
            obj.$data.stockTransferConfirm = json.data;
            obj.$data.currentTotal = json.recordsFiltered;
        }
    });
    // 1 库存转移确认 通过库存转移单据id确认转移一条转移单
    p[1] = autoPost({
        urlHock: "",
        urlProd: "/route/stockTransferConfirm/1",
        success: function (json) {

        }
    });
    // 2 库存转移确认 软删除多个或单个库存转移数据
    p[2] = autoPost({
        urlHock: "",
        urlProd: "/route/stockTransferConfirm/2",
        success: function (json) {

        }
    });
    // 3 库存转移确认 分页获取库存转移单据
    p[3] = autoPost({
        urlHock: "",
        urlProd: "/route/stockTransferConfirm/3",
        success: function (json) {

        }
    });
    // 4 库存转移确认  分页获取库存转移单据(包含详细信息)
    p[4] = autoPost({
        urlHock: "",
        urlProd: "/route/stockTransferConfirm/4",
        success: function (json) {
        }
    });
    // 5 库存转移确认 通过库存转移单据id删除库存转移单据
    p[5] = autoPost({
        urlHock: "",
        urlProd: "/route/stockTransferConfirm/5",
        method: 'GET'
    });

    // 6 库存转移 通过库存转移单据id获取一条库存转移单据
    p[6] = autoPost({
        urlHock: "",
        urlProd: "/route/stockTransferConfirm/6",
        method: 'GET'
    });
    p[0].post(stockTransferConfirm.option);

</script>